
<template>
  <div class="block text-center">
    <el-carousel height="300px" motion-blur indicator-position="outside">
      <el-carousel-item v-for="item in notices" :key="item.id">
        <div class="carousel-content">
          <h3 class="title">{{ item.title }}</h3>
          <div class="meta">
            <span class="author">发布人：{{ item.author }}</span>
            <span class="time">发布时间：{{ item.time }}</span>
          </div>
          <p class="content">{{ item.content }}</p>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 统计卡片 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span>📦 包裹总数</span>
            </div>
          </template>
          <div class="stat-value">{{ stats.packageTotal }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span>👥 用户总数</span>
            </div>
          </template>
          <div class="stat-value">{{ stats.userTotal }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span>⏳ 待签收包裹</span>
            </div>
          </template>
          <div class="stat-value">{{ stats.pendingPackage }}</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '@/utils/request.js'

const notices = ref([])
const stats = ref({
  packageTotal: 0,
  userTotal: 0,
  pendingPackage: 0
})

onMounted(async () => {
  try {
    // 获取统计信息
    const statsRes = await Promise.all([
      request.get('/package/total'),
      request.get('/user/total'),
      request.get('/package/pendingTotal')
    ])

    stats.value = {
      packageTotal: statsRes[0].data || 0,
      userTotal: statsRes[1].data || 0,
      pendingPackage: statsRes[2].data || 0
    }

    // 公告获取代码
    const res = await request.get('/notice/selectPage', {
      params: {
        pageNum: 1,
        pageSize: 3  // 获取最新的3条公告
      }
    })
    if (res.code === '200') {
      notices.value = res.data?.list || []
    }
  } catch (e) {
    console.error('公告加载失败', e)
  }
})
</script>

<style scope>
.carousel-content {
  padding: 30px;
  text-align: left;
}

.title {
  font-size: 24px;
  color: #333;
  margin-bottom: 15px;
}

.meta {
  margin-bottom: 20px;
  color: #666;
}

.meta span {
  display: block;
  margin: 5px 0;
}

.content {
  font-size: 16px;
  line-height: 1.6;
  color: #444;
}

.el-carousel__item {
  background-color: #f5f7fa !important;
}

.dashboard-container {
  padding: 20px;
}

.stat-card {
  margin-bottom: 20px;
  transition: transform 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.card-header {
  font-size: 16px;
  font-weight: 500;
  color: #606266;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  text-align: center;
  padding: 20px 0;
}

.el-carousel {
  margin-top: 30px;
}
</style>